<script lang="ts">
  import * as echarts from "echarts";
  import { onMount } from "svelte";
  import Title from "../../../components/Title/Title.svelte";
  import { runTime } from "../stores";

  let myChart2;

  let xAxisData = [];
  let seriesData = [];
  runTime.subscribe((runtimeSeries) => {
    const { catalog, series } = runtimeSeries;
    xAxisData = catalog;
    seriesData = series;

    if (myChart2) {
      myChart2.setOption(getOption(xAxisData, seriesData));
    }
  });
  onMount(() => {
    runTime.get();
    myChart2 = echarts.init(document.getElementById("c-2"));
    myChart2.setOption(getOption(xAxisData, seriesData));
  });

  function onResize() {
    myChart2.setOption(getOption(xAxisData, seriesData));
    myChart2.resize();
  }

  function getOption(xAxisData, seriesData) {
    let rate = 1;
    if (window.innerWidth) {
      rate = Math.ceil(window.innerWidth / 1920);
    }
    return {
      grid: {
        top: "14%",
        right: "6%",
        left: "4%",
        bottom: "4%",
        containLabel: true,
      },
      // color: ["#0391ff"], title: {text: ""},
      tooltip: { trigger: "axis" },
      animationDuration: 2000,
      xAxis: {
        show: true,
        data: xAxisData,
        axisLabel: { color: "#ffffff", fontSize: 10 * rate },
        axisLine: { show: true, lineStyle: { color: "#0a66ae" } },
        axisTick: { show: true, lineStyle: { color: "#0a66ae" } },
        splitLine: { show: true, interval: 0, lineStyle: { color: "#0a66ae" } },
      },
      yAxis: {
        show: true,
        type: "value",

        name: "单位（min）",
        nameTextStyle: {
          color: "#ffffff",
          nameLocation: "start",
        },
        axisLabel: { show: true, color: "#ffffff", fontSize: 10 * rate },
        axisTick: { show: true, lineStyle: { color: "#0a66ae" } },
        splitLine: { show: true, lineStyle: { color: "#0a66ae" } },
      },
      series: seriesData.map((series) => {
        const { name, data } = series;

        return {
          name,
          type: "line",
          lineStyle: { width: 2 * rate },
          data,
          smooth: true,
        };
      }),
    };
  }
</script>

<svelte:window on:resize={onResize} />
<div class="h-full flex flex-col">
  <Title title="设备运行时间" />
  <div id="c-2" class="flex-1 w-full" />
</div>

<style>
</style>
